<template>
    <DialogComponent class="custom-dialog" :layer="dialogParams" @update:visible="closeAcountDialog" @confirm="confirmAcountDialog">
        <div>
            <el-form ref="ruleFormRef" :model="userInfo" :rules="rules" :label-width="labelWidth" status-icon class="demo-form-inline">
                <el-form-item label="用户ID" prop="name">
                    <el-input v-model="userInfo.name" placeholder="请输入用户ID" :disabled="!!userInfo.id" />
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="userInfo.phone" placeholder="请输入手机号" maxlength="11" :disabled="!!userInfo.id" />
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="userInfo.username" maxlength="200" placeholder="请输入用户姓名" />
                </el-form-item>
                <el-form-item label="所在单位" prop="password">
                    <el-input v-model="userInfo.password" placeholder="请输入所在单位" />
                </el-form-item>
            </el-form>
        </div>
    </DialogComponent>
</template>
<script>
import { ref, reactive, toRefs } from 'vue'
import DialogComponent from '@/components/dialogComp.vue'
export default {
    components: { DialogComponent },
    props: {
        dialogParams: {
            type: Object,
            default: () => {
                return {}
            },
            required: true
        },
        user: {
            type: Object,
            default: () => {
                return null
            }
        }
    },
    emits: ['dialog:confirm', 'dialog:close'],
    setup(props, ctx) {
        const ruleFormRef = ref()
        const labelWidth = ref('90px')
        const { user } = toRefs(props)
        console.log('user', user, user.value)
        const userInfo = reactive(user.value || {
            id: '',
            name: '',
            phone: '',
            password: '',
            username: '',
            address: ''
        })
        const rules = reactive({
            name: [
                { required: true, message: '请输入登录名', trigger: 'blur' }
                // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
            ],
            phone: [
                {
                    required: true,
                    message: '请输入手机号',
                    trigger: 'change'
                }
            ],
            password: [
                { required: true, message: '请输入登录密码', trigger: 'blur' }
                // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
            ]
        })
        // 关闭添加账号对话框
        const closeAcountDialog = () => {
            console.log('dialogParams', props.dialogParams.value)
            // props.dialogParams.value.show = false;
            ctx.emit('dialog:close')
        }
        // 账号对话框confirm
        const confirmAcountDialog = () => {
            console.log('dialogParams', props.dialogParams.value)
            // props.dialogParams.value.show = false;
            ctx.emit('dialog:confirm')
        }
        return {
            ruleFormRef,
            labelWidth,
            userInfo,
            rules,
            closeAcountDialog,
            confirmAcountDialog
        };
    }
}
</script>
<style scoped>
.pl12 {
    padding-left: 12px;
}
.c-999 {
    color: #999;
}
</style>